<template>
	<div class="payConter">
		<div class="cart-header">
			<div class="cart-header-warp">
				<div class="cart-title">
					<h1 class="left">支付中心</h1>
				</div>
			</div>
		</div>
		<div class="cart-body">
			<div class="title-box clearfix">
				<p class="l goods-info-title">订单：1710291551506974</p>
			</div>
			<div class="detail-box">
				<ul>
					<li class="js-item-cart">
						<a href="http://coding.imooc.com/class/101.html" target="_blank" class="pull-left">
							<img src="http://img.mukewang.com/szimg/5909a1250001197e05400300-160-90.jpg" alt="">
						</a>
						<div class="text-info-box pull-left">
							<a href="" target="_blank"><p class="info-title">BAT大咖助力 全面升级Android面试</p></a>
							<p class="info-del">视频学习不限期，提供100天种类丰富的教学服务</p>				
						</div>
						<p class="info-price pull-left">实付金额：<em>￥</em><span>288.00</span></p>
					</li>
				</ul>
			</div>
			<div class="pay-method">
				<h2 class="pay-method-title">支付方式</h2>
				<ul>
					<li :class="['alipay', {active:zfbActive}]" @click="zfbActive = true;wxActive = false;">
						<div class="bottomright">
							<div class="triangle"></div>
							<i class="imv2-check"></i>
						</div>
					</li>
					<li :class="['wxpay', {active:wxActive}]" @click="zfbActive = false;wxActive = true;">
						<div class="bottomright">
							<div class="triangle"></div>
							<i class="imv2-check"></i>
						</div>
					</li>
				</ul>
			</div>
			<div class='pay-box'>
				<div class="goods-total-price-box pay-price-box">
				    <p class="pull-left tishi">请在 23小时59分钟 以内支付完成，如未完成此订单将自动关闭。需重新购买！</p>
					<p class="price-text">应付金额：</p>
					<p class="price-num"><em>￥</em><span>288.00</span></p>
				</div>
				<div class="pay-account-box">
					购买账号：<span>南有嘉木</span>
				</div>
				<a href="javascript:void(0);" class="js-pay-submit moco-btn-red">立即支付</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'payConter',
		data() {
	      return {
	        value: 1,
	        zfbActive: true,
	        wxActive: false,
	      }
	    },
		methods: {
	     	handleAudit(a){
            	return `#/homePage/videoPlay`;
            },
	    }
	}
	
</script>

<style lang="less">
.payConter{
	padding-bottom:40px;
	margin-top: 72px;
	.cart-header {
	    height: 160px;
	    background-color: #e3e6e9;
	    background: url(../../../assets/img/cart-header-bg.jpg) repeat-x left bottom;
	    .cart-header-warp {
		    width: 1104px;
		    height: 120px;
		    line-height: 120px;
		    margin-left: auto;
		    margin-right: auto;
		    font-size: 14px;
		}
		.cart-title h1 {
		    font-size: 32px;
		    line-height: 115px;
		    margin-right: 25px;
		    color: #07111b;
		    font-weight: 200;
		}
	}
	a{text-decoration: none;}
	.cart-body{
		width: 1152px;
	    padding: 0 36px 32px;
	    background-color: #fff;
	    margin-top: -40px;
	    margin-left: auto;
	    margin-right: auto;
	    box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
	    border-radius: 8px;
	    box-sizing: border-box;
	    .title-box {
		    padding-top: 36px;
		    padding-bottom: 24px;
		}
		.title-box .goods-info-title {
		    margin-left: 12px;
		    color: #07111b;
		    font-size: 16px;
		    line-height: 16px;
		}
		.detail-box ul {
		    width: 100%;
		    padding-bottom: 36px;
		    border-bottom: 1px solid #d9dde1;
		    list-style: none;
		    padding-left:0;
		}
		.detail-box ul li {
		    padding: 24px;
		    box-sizing: border-box;
		    background: #f3f5f7;
		    overflow: hidden;
		    .text-info-box .info-del {
			    font-size: 12px;
			    color: #93999F;
			    line-height: 24px;
			    font-weight: 200;
			}
		}
		.detail-box ul li img {
		    width: 160px;
		    height: 90px;
		    margin-right: 24px;
		}
		.pull-left{float:left;}
		.detail-box ul li .text-info-box {
		    width: 462px;
		    height: 90px;
		    margin-right: 96px;
		}
		.detail-box ul li .text-info-box .info-title {
		    margin: 12px 0px 12px;
		    font-size: 16px;
		    color: #07111B;
		    line-height: 24px;
		}
		.detail-box ul li .info-price {
		    position: relative;
		    margin-top: 35px;
		    width: 286px;
		    font-size: 16px;
		    color: #93999f;
		    em,span{font-style:normal;
		       color: #f01414;
		    }
		}
		.pay-box{
			margin-top:36px;
			text-align: right;
			overflow:hidden;
			.goods-total-price-box{
				margin-bottom: 16px;
				.price-num{
					display: inline-block;
					width:140px;
					em{font-style: normal;}
				}
				.price-text{
					display:inline-block;
				}
			}
			.pay-price-box{
				.tishi{
					color:#ff9900;
				}
				.price-num{
					span,em{
						color:#f01414;
						font-size:24px;
					}
				}
			}
			.pay-account-box{
				font-size: 12px;
    			color: #93999f;
    			margin-bottom:20px;

			}
			.js-pay-submit{
				padding: 0px;
			    width: 140px;
			    height: 40px;
			    text-align: center;
			    font-size: 14px;
			    line-height: 40px;
			    border-radius:2px;
			    display:block;
			    color:#fff;
			    float:right;
			    overflow:hidden;
			}
			.js-pay-submit:hover{
				background-color: #ff2815;
    			border-color: #ff2815;
			}
			.moco-btn-red{
				background-color: #f01400;
    			border-color: #f01400;
			}
		}
		.pay-method{
			overflow:hidden;
			border-bottom: 1px solid #d9dde1;
			padding-bottom:48px;
			.pay-method-title{
				height: 46px;
			    line-height: 30px;
			    font-size: 16px;
			    color: #07111B;
			}
			ul{
				list-style:none;
			}
		}
		.pay-method li {
		    float: left;
		    margin-right: 25px;
		    position: relative;
		    width: 236px;
		    height: 86px;
		    background-color: #f8fafc;
		    border: 2px solid #f8fafc;
		    cursor: pointer;
		    background-image: url(../../../assets/img/pay_s.png);
		}
		.pay-method .alipay {
		    background-position: 55px -301px;
		    background-repeat: no-repeat;
		}
		.pay-method .wxpay {
		    background-position: 48px -422px;
		    background-repeat: no-repeat;
		}
		.pay-method li.active {
		    border-color: #f01414;
		}
		.pay-method .bottomright {
		    width: 20px;
		    height: 20px;
		    position: absolute;
		    right: 0;
		    bottom: 0;
		    display: none;
		}
		.pay-method li.active .bottomright {
		    display: block;
		}
		.pay-method .triangle {
		    width: 0;
		    height: 0;
		    border-bottom: 20px solid red;
		    border-left: 20px solid transparent;
		}
	}
}

</style>